import React from 'react'
import { ProjectListScreen } from 'screens/project-list'
import { useAuth } from 'context/auth-context'
import { ReactComponent as SoftwareLogo } from 'assets/software-logo.svg'
import styled from '@emotion/styled'
import {
  ButtonNoPadding,
  Row // 封装的 Row
} from 'components/lib'
import { Button, Dropdown, Menu } from 'antd'
import { Route, Routes } from 'react-router'
import { ProjectScreen } from 'screens/project'
import { resetRoute } from 'utils'
import { ProjectModal } from 'screens/project-list/project-modal'
import { ProjectPopover } from 'components/project-popover'
import { UserPopover } from 'components/user-popover'

const Container = styled.div`
  display: grid; // grid-area 用来给 grid 子元素起名字
  grid-template-rows: 6rem 1fr; // header 6rem 内容剩余全部
  height: 100vh;
`
const Header = styled(Row)`
  padding: 3.2rem;
  box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.1);
  z-index: 1;
`
const HeaderLeft = styled(Row)``
const HeaderRight = styled.div``
const Main = styled.main`
  display: flex;
  overflow: hidden;
`
// prop drilling: 父组件向子组件传递 props，如果层级太深，则会导致代码难以维护
// temporal dead zone(暂时性死区)

export default function AuthenticatedApp() {
  const { logout, user } = useAuth()
  return (
    <Container
    // as={'div'} // **** 表示是DIV
    >
      <Header between={true}>
        <HeaderLeft gap={true}>
          <ButtonNoPadding type={'link'} onClick={resetRoute}>
            <SoftwareLogo width={'18rem'} color={'rgb(38, 132, 255)'} />
          </ButtonNoPadding>
          <ProjectPopover />
          <UserPopover />
        </HeaderLeft>
        <HeaderRight>
          <Dropdown
            overlay={
              <Menu>
                <Menu.Item key={'logout'}>
                  <Button onClick={logout} type={'link'}>
                    登出
                  </Button>
                </Menu.Item>
              </Menu>
            }
          >
            <Button type={'link'} onClick={(e) => e.preventDefault()}>
              Hi, {user?.name}
            </Button>
          </Dropdown>
        </HeaderRight>
      </Header>
      <Main>
        <Routes>
          <Route path={'projects'} element={<ProjectListScreen />} />
          <Route path={'projects/:projectId/*'} element={<ProjectScreen />} />
          <Route index element={<ProjectListScreen />} />
        </Routes>
      </Main>
      <ProjectModal />
    </Container>
  )
}
